<template>
  <page-header-wrapper>
    <page-tab-list> </page-tab-list>

    <a-card
      :bordered="false"
      :bodyStyle="{
        marginTop: '24px',
      }"
    >
      <div class="applyBox" style="width: 100%">
        <div class="applyForm" style="width: 100%">
          <a-form-model
            :model="form"
            :label-col="{ span: 3 }"
            ref="ruleForm"
            style="margin-top: 10px"
            :wrapper-col="{ span: 21 }"
            :rules="rules"
          >
            <h3 class="subTitle">申请条件设置</h3>
            <a-form-model-item label="是否开启审核" prop="store_apply_audit">
              <a-radio-group v-model="form.store_apply_audit">
                <a-radio value="1">开启</a-radio>
                <a-radio value="0">关闭</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="是否开启免费体验" prop="store_apply_free">
              <a-radio-group v-model="form.store_apply_free">
                <a-radio value="1">开启</a-radio>
                <a-radio value="0">关闭</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="推广代理分润比例" prop="admin_profit">
              <a-input
                type="number"
                :min="0"
                :max="100"
                :step="0.1"
                precision="2"
                :addon-after="'%'"
                v-model="form.admin_profit"
              />
            </a-form-model-item>
            <a-form-model-item v-if="form.store_apply_free === '1'" label="免费体验天数" prop="store_apply_free_days">
              <div class="flexBox">
                <a-input-number class="inp" v-model="form.store_apply_free_days" :min="0" />
                <div class="text">天</div>
              </div>
            </a-form-model-item>
            <a-form-model-item label="购买方式" prop="store_apply_buy_type">
              <a-radio-group v-model="form.store_apply_buy_type">
                <a-radio value="free">免费申请</a-radio>
                <a-radio value="once">一次性购买</a-radio>
                <a-radio value="renew">续费购买</a-radio>
              </a-radio-group>
              <div class="mTs">开启免费体验后免费申请将不可选择</div>
            </a-form-model-item>
            <a-form-model-item
              label="购买金额"
              prop="store_apply_buy_money"
              v-if="form.store_apply_buy_type === 'once'"
            >
              <div class="flexBox">
                <a-input-number class="inp" v-model="form.store_apply_buy_money" :min="1" />
                <div class="text">元</div>
              </div>
            </a-form-model-item>
            <template v-if="form.store_apply_buy_type === 'renew'">
              <a-form-model-item label="续费方式" prop="store_apply_renew">
                <a-radio-group v-model="form.store_apply_renew" style="margin-bottom: 20px">
                  <a-radio value="sys">固定时间</a-radio>
                  <a-radio value="custom">自定义时间</a-radio>
                </a-radio-group>

                <a-table
                  v-show="form.store_apply_renew === 'sys'"
                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                  :columns="columns"
                  :data-source="sysPriceList"
                >
                  <span slot="date" slot-scope="text, record">
                    {{ getSysName(record.days) }}
                  </span>
                  <span slot="name" slot-scope="text, record">
                    <a-input v-model="record.name" placeholder="请输入名称" />
                  </span>
                  <span slot="price" slot-scope="text, record">
                    <div class="flexBox">
                      <a-input-number class="inp inp2" v-model="record.price" :precision="2" :min="0" />
                      <div class="text">元</div>
                    </div>
                  </span>
                  <span slot="discount" slot-scope="text, record">
                    <a-input v-model="record.discount_name" placeholder="请输入折扣名称" />
                  </span>
                </a-table>

                <div v-show="form.store_apply_renew === 'custom'">
                  <a-table :columns="columns2" :data-source="customPriceList">
                    <span slot="date" slot-scope="text, record">
                      <div class="flexBox" v-show="record.isEdit">
                        <a-input-number class="inp inp2" v-model="record.days" :min="0" />
                        <div class="text">天</div>
                      </div>
                      <span v-show="!record.isEdit"> {{ record.days }}天 </span>
                    </span>
                    <span slot="name" slot-scope="text, record">
                      <a-input v-show="record.isEdit" v-model="record.name" placeholder="请输入名称" />
                      <span v-show="!record.isEdit"> {{ record.name }} </span>
                    </span>
                    <span slot="price" slot-scope="text, record">
                      <div class="flexBox" v-show="record.isEdit">
                        <a-input-number class="inp inp2" v-model="record.price" :precision="2" :min="0" />
                        <div class="text">元</div>
                      </div>
                      <span v-show="!record.isEdit"> {{ record.price }}元 </span>
                    </span>
                    <span slot="discount" slot-scope="text, record">
                      <a-input v-show="record.isEdit" v-model="record.discount_name" placeholder="请输入折扣名称" />
                      <span v-show="!record.isEdit"> {{ record.discount_name }} </span>
                    </span>
                    <span slot="action" slot-scope="text, record, index">
                      <a-button type="link" v-if="record.isEdit" @click="addSubmit(record)">保存</a-button>
                      <a-button type="link" v-if="!record.isEdit" @click="edit(record)">编辑</a-button>
                      <a-divider type="vertical" />
                      <a-button type="link" @click="remove(record, index)">删除</a-button>
                    </span>
                  </a-table>

                  <div class="customBtn" @click="add">
                    <a-icon type="plus" />
                    <span>添加</span>
                  </div>
                </div>
              </a-form-model-item>
            </template>
            <!-- <div class="level_title">轮播广告</div>
                <a-form-model-item label="头部轮播图片" prop="md_banner">
                  <div class="pics">
                    <div class="loadImg" v-for="(item, index) in form.store_apply_banner" :key="index">
                      <img :src="item" alt="" />
                      <a-icon type="close-circle" class="close" @click="deletePic(index)" />
                    </div>
                    <div
                      class="loadImg add"
                      v-if="form.store_apply_banner.length < 3"
                      @click="$refs.img.onClickUploadBtn()"
                    >
                      <a-icon type="plus" />
                      <span>上传照片</span>
                    </div>
                  </div>
                  <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45)">建议尺寸：750*320</span>
                </a-form-model-item>
                <div class="level_title" style="border-top: 1px solid #e9e9e9;padding-top: 25px;">会员设置</div>
                <a-form-model-item label="入驻协议" prop="store_apply_agreement">
                  <WangEditor :value="content" @change="onDescChange"></WangEditor>
                  <a-textarea :hidden="true" v-model="form.store_apply_agreement" />
                </a-form-model-item> -->
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit"> 保存 </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
        <div class="preview" v-if="false">
          <h4>店铺申请预览</h4>
          <div class="picBox">
            <img src="../../assets/images/apply4.png" alt="" class="head" />
            <div class="picList">
              <el-carousel height="160px">
                <el-carousel-item v-for="(item, index) in form.store_apply_banner" :key="index">
                  <div class="pic">
                    <img :src="item" alt="" />
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <img src="../../assets/images/apply5.png" alt="" class="foot1" />
            <img src="../../assets/images/apply6.png" alt="" class="foot2" />
          </div>
        </div>
      </div>
    </a-card>

    <storage-select selectNum="1" type="image" ref="img" @onOk="okPic" :hiddenInput="true"> </storage-select>
  </page-header-wrapper>
</template>

<script>
import { applyGet, applySubmit, storePriceDel, storePriceAdd } from '@/api/saas/setting'
import { WangEditor } from '@/components'

export default {
  components: {
    WangEditor,
  },

  computed: {
    getSysName() {
      return (days) => {
        let name
        switch (days) {
          case 30:
            name = '1个月'
            break
          case 90:
            name = '3个月'
            break
          case 365:
            name = '12个月'
            break
        }
        return name
      }
    },
  },
  data() {
    const checkBanner = (rule, value, callback) => {
      if (!this.form.store_apply_banner.length) {
        callback(new Error('请上传宣传图片'))
      } else {
        callback()
      }
    }
    return {
      activeKey: 'list',
      form: {
        // store_apply_banner: [],
        // store_apply_agreement: ''
        store_apply_audit: '1',
        store_apply_free: '1',
        store_apply_free_days: 0,
        store_apply_buy_type: '',
        store_apply_buy_money: '',
        store_apply_renew: '',
        admin_profit: '0.00',
      },

      sysPriceList: [],
      customPriceList: [],

      // 验证规则
      rules: {
        store_apply_audit: [{ required: true, message: '请选择是否审核', trigger: 'change' }],
        store_apply_free: [{ required: true, message: '请选择是否免费体验', trigger: 'change' }],
        store_apply_free_days: [{ required: true, message: '请输入免费眼熟', trigger: 'blur' }],
        store_apply_buy_type: [{ required: true, message: '请选择购买方式', trigger: 'change' }],
        store_apply_buy_money: [{ required: true, message: '请输入购买金额', trigger: 'blur' }],
        store_apply_renew: [{ required: true, message: '请选择续费方式', trigger: 'change' }],
        admin_profit: [{ required: true, message: '请选择推广代理分润比例', trigger: 'change' }],
        // md_banner: [{ validator: checkBanner, trigger: 'change' }],
        // store_apply_agreement: [{ required: true, message: '请输入协议', trigger: 'blur' }]
      },
      // 富文本
      content: '',
      columns: [
        {
          title: '有效期限',
          scopedSlots: {
            customRender: 'date',
          },
        },
        {
          title: '自定义名称',
          scopedSlots: {
            customRender: 'name',
          },
        },
        {
          title: '价格',
          scopedSlots: {
            customRender: 'price',
          },
        },
        {
          title: '自定义折扣',
          scopedSlots: {
            customRender: 'discount',
          },
        },
      ],

      columns2: [
        {
          title: '自定义名称',
          scopedSlots: {
            customRender: 'name',
          },
        },
        {
          title: '有效期',
          scopedSlots: {
            customRender: 'date',
          },
        },
        {
          title: '价格',
          scopedSlots: {
            customRender: 'price',
          },
        },
        {
          title: '自定义折扣',
          scopedSlots: {
            customRender: 'discount',
          },
        },
        {
          title: '操作',
          scopedSlots: {
            customRender: 'action',
          },
          width: 180,
          // customRender: (text, record, index) => `${(text, record, index + 1)}`
        },
      ],
      data: [],
      selectedRowKeys: [],
    }
  },
  methods: {
    // 上传图片
    okPic(e) {
      if (this.form.store_apply_banner.length < 3) {
        this.form.store_apply_banner.push(e)
      }
    },
    onDescChange(e) {
      this.form.store_apply_agreement = e
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          return false
        }
      })
    },
    // 获取申请详情
    async getInfo(type = 0) {
      const hide = this.$message.loading('加载中', 0)
      const res = await applyGet()
      hide()
      if (res.code == 0) {
        let customPriceList = [],
          sysPriceList = [],
          selectedRowKeys = [],
          { priceList } = res.data

        priceList.forEach((el) => {
          if (el.is_sys) {
            sysPriceList.push(el)
          } else {
            customPriceList.push(el)
          }
        })
        this.customPriceList = customPriceList

        if (type === 1) return

        this.form = res.data
        this.content = res.data.store_apply_agreement
        this.sysPriceList = sysPriceList

        sysPriceList.forEach((el, i) => {
          if (el.used) {
            selectedRowKeys.push(i)
          }
        })
        this.selectedRowKeys = selectedRowKeys
      }
    },
    // 提交申请
    async submit() {
      let { selectedRowKeys, sysPriceList, form } = this,
        newform = {
          ...form,
          sysPriceList: [...sysPriceList],
        }

      newform.sysPriceList.forEach((el, i) => {
        if (selectedRowKeys.indexOf(i) === -1) {
          el.used = 0
        } else {
          el.used = 1
        }
      })
      const res = await applySubmit(newform)
      if (res.code == 0) {
        this.$message.success(res.msg)
        this.getInfo()
        return
      }

      this.$message.error(res.msg)
    },
    // 点击删除图片
    deletePic(e) {
      this.form.store_apply_banner.splice(e, 1)
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    add() {
      this.customPriceList.push({
        days: '',
        discount_name: '',
        price: '',
        name: '',
        isEdit: true,
      })
    },

    addSubmit(item) {
      let { days, discount_name, price, name } = item,
        data = {
          days,
          discount_name,
          price,
          name,
        }

      if (item.id) {
        data.id = item.id
      }

      const hide = this.$message.loading('加载中', 0)
      storePriceAdd(data).then((res) => {
        hide()
        if (!res.code) {
          this.$message.success(res.msg)
          this.getInfo(1)
          return
        }

        this.$message.error(res.msg)
      })
    },

    edit(item) {
      this.$set(item, 'isEdit', !item.isEdit)
    },

    remove(item, index) {
      let { customPriceList } = this
      if (item.id) {
        const hide = this.$message.loading('正在删除~', 0)
        storePriceDel({
          id: item.id,
        }).then((res) => {
          hide()
          if (!res.code) {
            this.$message.success(res.msg)
            customPriceList.splice(index, 1)
            return
          }

          this.$message.error(res.msg)
        })
        return
      }

      customPriceList.splice(index, 1)
    },
  },
  created() {
    this.getInfo()
  },
}
</script>

<style lang="less" scoped>
.level_title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 10px 0 20px 0;
}
.loadImg {
  position: relative;
  margin-right: 8px;
  padding: 8px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .anticon {
    font-size: 30px;
    color: rgba(0, 0, 0, 0.45);
  }
  img {
    width: 100%;
    height: 100%;
  }
  .close {
    position: absolute;
    right: -5px;
    top: -10px;
    font-size: 18px;
    color: #ff4400;
    cursor: pointer;
  }
}
.add {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px dashed rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.applyBox {
  display: flex;
  justify-content: space-between;

  .applyForm {
    .pics {
      display: flex;
    }
  }
  .preview {
    width: 375px;
    .picBox {
      margin-top: 20px;
      background-color: #d9d9d9;
    }
    .head {
      width: 100%;
    }
    .picList {
      width: 100%;
      height: 160px;
      .ant-carousel {
        width: 375px;
        height: 160px;
      }
      .pic {
        width: 100%;
        height: 160px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .foot1 {
      width: 100%;
    }
    .foot2 {
      width: 100%;
      margin-top: 40px;
    }
  }
}

.flexBox {
  display: flex;
  align-items: center;
  .inp {
    width: 426px;
    border-radius: 2px 0 0 2px;

    &.inp2 {
      width: 100%;
    }
  }

  .text {
    width: 42px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #d9d9d9;
    border-radius: 0 2px 2px 0;
    border-left: 0;
    background: #f7f7f7;
  }
}

.subTitle {
  font-weight: bold;
}

.mTs {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.customBtn {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: 1px dashed #e8e8e8;

  span {
    margin-left: 10px;
  }

  &:hover {
    cursor: pointer;
    border-color: #1890ff;
    color: #1890ff;
  }
}
</style>
